<!DOCTYPE html>
<html>
	<head>
	  	<meta charset="utf-8">
	  	<title></title>
	  	<meta name="renderer" content="webkit">
	  	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	  	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
	  	<link rel="stylesheet" href="/usercp/layui/css/layui.css" media="all">
  		<link rel="stylesheet" href="/usercp/style/admin.css" media="all">
	</head>
	<body>
		<div class="m-site-framebody">
			<div class="layui-form layui-card-header layuiadmin-card-header-auto">
	        <div class="layui-form-item">
	          <div class="layui-inline">
	            <label class="layui-form-label">站点名称</label>
	            <div class="layui-input-inline">
	              <input type="text" name="name" id="name" placeholder="请输入站点名称" autocomplete="off" class="layui-input">
	            </div>
	          </div>
	        	<div class="layui-inline">
	        		<label class="layui-form-label">开通时间</label>
	        		<div class="layui-input-inline"> <!-- 注意：这一层元素并不是必须的 -->
					  <input type="text" name="create_time" class="layui-input" id="create_time">
					</div>
				</div>
	        	<div class="layui-inline">
	        		<label class="layui-form-label">到期时间</label>
	        		<div class="layui-input-inline"> <!-- 注意：这一层元素并不是必须的 -->
					  <input type="text" name="deadline" class="layui-input" id="dead_time">
					</div>
				</div>
				<div class="layui-inline">
		            <button class="layui-btn layuiadmin-btn-useradmin" lay-submit lay-filter="LAY-user-front-search">
		              <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
		            </button>
	          	</div>
			</div>
	      	</div>
		      <div class="layui-card-body">
		        <div style="padding-bottom: 10px;">
		          <button class="layui-btn layuiadmin-btn-useradmin" data-type="add">创建站点</button>
		        </div>
				<table id="site_lists" lay-filter="site_lists"></table>
				<script type="text/html" id="imgTpl"> 
	          		<img style="display: inline-block; width: 50%; height: 100%;" src= {{ d.avatar }}>
		        </script> 
		        <script type="text/html" id="table-useradmin-webuser">
		          <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
		          <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="renew"><i class="layui-icon layui-icon-dollar"></i>续费</a>
		        </script>
		    </div>
		</div>
		<style>
			html {
				background-color: #fff;
			}
			.m-site-framebody {
				padding: 10px 15px;
			}
			.m-site-framebody-header {
				margin-bottom: 20px;
				padding-bottom: 10px;
				font-size: 14px;
				border-bottom: 1px solid #e6e6e6;
			}
			.layui-table, .layui-table-view {
				margin: 0;
			}
		</style>
		<script src="/usercp/layui/layui.js"></script>
		<script>
		layui.use(['table','laydate'], function(){
		  	var $ = layui.$
				  ,table = layui.table
				  ,form = layui.form;
			var laydate = layui.laydate;
			laydate.render({ 
			  elem: '#create_time'
			  ,type: 'date'
			  ,range: true //或 range: '~' 来自定义分割字符
			});
			laydate.render({ 
			  elem: '#dead_time'
			  ,type: 'date'
			  ,range: true //或 range: '~' 来自定义分割字符
			});
			//第一个实例
			table.render({
			    elem: '#site_lists',
			    height: 312,
			    url: '/usercp/site/lists/', //数据接口
				page: true, //开启分页
				cols: [[ //表头
					{field: 'name', title: '站点名称'},
					{field: 'custom_name', title: '所属客户'},
					{field: 'type_text', title: '站点类型'},
				  	{field: 'create_time', title: '开通时间',sort: true},
				  	{field: 'time_text', title: '计费时长',sort: true},
				  	{field: 'deadline_text', title: '到期时间',sort: true},
				  	{title: '操作', width: 250, align:'center', fixed: 'right', toolbar: '#table-useradmin-webuser'}
				]],
				page: true
			    ,limit: 30
			    ,height: 'full-220'
			    ,text: '对不起，加载出现异常！'
			    ,response: {
			      statusName: 'code' //规定数据状态的字段名称，默认：code
			      ,statusCode: 200 //规定成功的状态码，默认：0
			      ,msgName: 'msg' //规定状态信息的字段名称，默认：msg
			      ,countName: 'count' //规定数据总数的字段名称，默认：count
			      ,dataName: 'data' //规定数据列表的字段名称，默认：data
			    }
			    ,parseData: function(res){ //res 即为原始返回的数据
			      return {
			        "code": res.code, //解析接口状态
			        "msg": res.msg, //解析提示文本
			        "count": res.data.total, //解析数据长度
			        "data": res.data.data //解析数据列表
			      };
			    }
			});
			//监听搜索
		    form.on('submit(LAY-user-front-search)', function(data){
		      var field = data.field;
		      //执行重载
		      	table.reload('site_lists', {
		        	url: '/usercp/site/lists'
  					,where: {
  						name:field.name,
  						create_time:field.create_time,
  						deadline:field.deadline
  					} //设定异步数据接口的额外参数
		      	});
		    });
		  	
		    //事件
		    var active = {
		      add: function(){
		      	layer.open({
		          type: 2
		          ,title: '创建站点'
		          ,content: '/usercp/site/create'
		          ,maxmin: true
		          ,area: ['500px', '600px']
		          ,btn: ['确定', '取消']
		          ,yes: function(index, layero){
		            var iframeWindow = window['layui-layer-iframe'+ index]
		            ,submitID = 'LAY-user-front-submit'
		            ,submit = layero.find('iframe').contents().find('#'+ submitID);

		            //监听提交
		            iframeWindow.layui.form.on('submit('+ submitID +')', function(data){
		              var field = data.field; //获取提交的字段
		              
		              //提交 Ajax 成功后，静态更新表格中的数据
		              $.ajax({
		                url: '/usercp/site/create',
		                type: "POST",
		                data: field,
		                dataType: 'json',
		                success: function(res) {
		                  if (res.code == 0){
		                    layer.msg(res.msg, {
		                      offset: '15px'
		                      ,icon: 2
		                      ,anim: 6
		                      ,time: 1000
		                    }, function(){});
		                    return false;
		                  }else{
		                    layer.msg('创建成功', {
		                      offset: '15px'
		                      ,icon: 1
		                      ,time: 1000
		                    }, function(){
		                    	window.parent.location.href = '/usercp/site/index?site_id='+res.data.id;
		                      // table.reload('site_lists'); //数据刷新
		                      // layer.close(index); //关闭弹层
		                    });
		                  }
		                  return false;
		                }
		              });
		              return false;
		              //ajax结束
		            });  
		            
		            submit.trigger('click');
		          }
		        }); 
		      }
		    };
		    function getQueryString(name) { 
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 
				var r = window.location.search.substr(1).match(reg); 
				if (r != null) return unescape(r[2]); return null; 
			} 
		    $('.layui-btn.layuiadmin-btn-useradmin').on('click', function(){
		      var type = $(this).data('type');
		      active[type] ? active[type].call(this) : '';
		    });
			table.on('tool(site_lists)', function(obj){
			    var data = obj.data;
			    if(obj.event === 'renew'){
			        var tr = $(obj.tr);
				      //将row对象赋给子页面
				      window.ooob = data;
				      var renew_index = layer.open({
				        type: 2
				        ,title: '站点续费'
				        ,content: '/usercp/site/renew'
				        ,maxmin: true
				        ,area: ['500px', '380px']
				        ,btn: ['确定', '取消']
				        ,btnAlign: 'l'
				        ,yes: function(index, layero){
				          var iframeWindow = window['layui-layer-iframe'+ index]
				          ,submitID = 'LAY-user-front-submit'
				          ,submit = layero.find('iframe').contents().find('#'+ submitID);

				          //监听提交
				          iframeWindow.layui.form.on('submit('+ submitID +')', function(data){
				            var field = data.field; //获取提交的字段
				            field.id = obj.data.id;

				            //ajax开始
				            $.ajax({
				              url: '/usercp/site/renew',
				              type: "POST",
				              data: field,
				              dataType: 'json',
				              success: function(res) {
				                if (res.code == 0){
				                  layer.msg(res.msg, {
				                    offset: '15px'
				                    ,icon: 2
				                    ,anim: 6
				                    ,time: 1000
				                  }, function(){});
				                  return false;
				                }else{
				                  layer.msg('续费成功！', {
				                    offset: '15px'
				                    ,icon: 1
				                    ,time: 1000
				                  }, function(){
				                    table.reload('site_lists'); //数据刷新
				                    layer.close(index); //关闭弹层
				                  });
				                }
				                return false;
				              }
				            });
				            return false;
				            //ajax结束
				          });  
				          
				          submit.trigger('click');
				        }
			      	});
				     layer.full(renew_index);
			    } else if(obj.event === 'edit'){
			      var tr = $(obj.tr);
			      //将row对象赋给子页面
			      window.ooob = data;
			      var edit_index = layer.open({
			        type: 2
			        ,title: '修改站点'
			        ,content: '/usercp/site/edit'
			        ,maxmin: true
			        ,area: ['650px', '550px']
			        ,btn: ['确定', '取消']
			        ,btnAlign: 'l'
			        ,yes: function(index, layero){
			          var iframeWindow = window['layui-layer-iframe'+ index]
			          ,submitID = 'LAY-user-front-submit'
			          ,submit = layero.find('iframe').contents().find('#'+ submitID);

			          //监听提交
			          iframeWindow.layui.form.on('submit('+ submitID +')', function(data){
			            var field = data.field; //获取提交的字段
			            field.id = obj.data.id;

			            //ajax开始
			            $.ajax({
			              url: '/usercp/site/edit',
			              type: "POST",
			              data: field,
			              dataType: 'json',
			              success: function(res) {
			                if (res.code == 0){
			                  layer.msg(res.msg, {
			                    offset: '15px'
			                    ,icon: 2
			                    ,anim: 6
			                    ,time: 1000
			                  }, function(){});
			                  return false;
			                }else{
			                  layer.msg('修改成功！', {
			                    offset: '15px'
			                    ,icon: 1
			                    ,time: 1000
			                  }, function(){
			                    table.reload('site_lists'); //数据刷新
			                    layer.close(index); //关闭弹层
			                  });
			                }
			                return false;
			              }
			            });
			            return false;
			            //ajax结束
			          });  
			          
			          submit.trigger('click');
			        }
			      });
			      layer.full(edit_index);
			    }
			  });
		});
		</script>
	</body>
</html>
